<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=0">
    <meta name="format-detection" content="telephone=no">
    <link href="fonts/font-awesome.min.css" rel="stylesheet" />
    <link href="css/common.css" rel="stylesheet" />
    <link href="css/chooseCarInsurance.css" rel="stylesheet" />
    <title>e车险保</title>
    <style type="text/css">
        input{
            font-size: 1.364rem;
            color: #0081CC;
        }
        input[type='datetime']{
            color:#333;
        }
    </style>
</head>
<body class="bacc">
<div class="top-title">
    <div class="nav-left"><i class="fa fa-angle-left" aria-hidden="true"></i></div>
    保费详情
</div>
<div id="my-app">
    <div class="box" >
        <div class="title-box"><div class="title">交强险</div></div>
        <div class="item">
            <div class="left">保险起期</div>
            <div class="right"><input type="datetime"  :value="insurerDetail['ciBeginDate']" readonly></div>
        </div>
        <div class="item">
            <div class="left">交强险</div>
            <div class="right"><input type="text"  :value="insurerDetail['FORCEPREMIUM']['insuredPremium']" readonly></div>
        </div>
        <div class="item">
            <div class="left">车船税</div>
            <div class="right"><input type="text"  :value="insurerDetail['carshipTax']" readonly></div>
        </div>
    </div>
    <div class="box">
        <div class="title-box"><div class="title">商业险</div></div>
        <div class="item">
            <div class="left">保险起期</div>
            <div class="right"><input type="datetime"  :value="insurerDetail['biBeginDate']" readonly></div>
        </div>
        <div class="item" v-show="insurerDetail['A']">
            <div class="left">车辆损失</div>
            <div class="middle">{{(insurerDetail['A'].insuredAmount=="Y") ? "已投保":"未投保"}}</div>
            <div class="right" v-show="insurerDetail['A'].insuredAmount=='Y'"><input type="text"  :value="insurerDetail['A'].insuredPremium" readonly></div>
        </div>
        <div class="item" v-show="insurerDetail['B']">
            <div class="left">第三方责任险</div>
            <div class="middle">{{insurerDetail['B'] ? insurerDetail['B'].insuredAmount : ""}}</div>
            <div class="right"><input type="text"  :value="insurerDetail['B'] ? insurerDetail['B']['insuredPremium'] : ''" readonly></div>
        </div>
        <div class="item" v-show="insurerDetail['D3']">
            <div class="left">司机座位险</div>
            <div class="middle">{{insurerDetail['D3'] ? insurerDetail['D3'].insuredAmount : ''}}</div>
            <div class="right"><input type="text"  :value="insurerDetail['D3'] ? insurerDetail['D3']['insuredPremium'] : ''" readonly></div>
        </div>
        <div class="item" v-show="insurerDetail['D4']">
            <div class="left">乘客座位险</div>
            <div class="middle">{{insurerDetail['D4'] ? insurerDetail['D4'].insuredAmount : ''}}</div>
            <div class="right"><input type="text"  :value="insurerDetail['D4']? insurerDetail['D4']['insuredPremium']:''" readonly></div>
        </div>
        <div class="item" v-show="insurerDetail['G1']">
            <div class="left">盗抢险</div>
            <div class="right"><input type="text"  :value="insurerDetail['G1'] ? insurerDetail['G1']['insuredPremium'] : ''" readonly></div>
        </div>
        <div class="item" v-show="insurerDetail['L']">
            <div class="left">划痕险</div>
            <div class="right"><input type="text"  :value="insurerDetail['L'] ? insurerDetail['L']['insuredPremium'] :''" readonly></div>
        </div>
        <div class="item" v-show="insurerDetail['X1']">
            <div class="left">涉水险</div>
            <div class="right"><input type="text" :value="insurerDetail['X1'] ? insurerDetail['X1']['insuredPremium'] : ''" readonly></div>
        </div>
        <div class="item" v-show="insurerDetail['Z']">
            <div class="left">自燃险</div>
            <div class="right"><input type="text"  :value="insurerDetail['Z'] ? insurerDetail['Z']['insuredPremium'] : ''" readonly></div>
        </div>
        <div class="item" v-show="insurerDetail['Z3']">
            <div class="left">无法找到第三方特约险</div>
            <div class="right"><input type="text"   :value="insurerDetail['Z3'] ? insurerDetail['Z3']['insuredPremium'] : ''" readonly></div>
        </div>
        <div class="item" v-show="insurerDetail['MA']">
            <div class="left">不计免赔（车辆损失险）</div>
            <div class="right"><input type="text"   :value="insurerDetail['MA'] ? insurerDetail['MA']['insuredPremium'] : ''" readonly></div>
        </div>
        <div class="item" v-show="insurerDetail['ML']">
            <div class="left">不计免赔（车身划痕）</div>
            <div class="right"><input type="text"   :value="insurerDetail['ML'] ? insurerDetail['ML']['insuredPremium'] : ''" readonly></div>
        </div>
        <div class="item" v-show="insurerDetail['MZ']">
            <div class="left">不计免赔（自燃险）</div>
            <div class="right"><input type="text"   :value="insurerDetail['MZ'] ? insurerDetail['MZ']['insuredPremium'] : ''" readonly></div>
        </div>
        <div class="item" v-show="insurerDetail['MB']">
            <div class="left">不计免赔（第三者责任险）</div>
            <div class="right"><input type="text"   :value="insurerDetail['MB'] ? insurerDetail['MB'].insuredPremium : ''" readonly></div>
        </div>
        <div class="item" v-show="insurerDetail['MD3']">
            <div class="left">不计免赔（司机座位险）</div>
            <div class="right"><input type="text"   :value="insurerDetail['MD3'] ? insurerDetail['MD3']['insuredPremium'] : ''" readonly></div>
        </div>
        <div class="item" v-show="insurerDetail['MD4']">
            <div class="left">不计免赔（乘客座位险）</div>
            <div class="right"><input type="text"   :value="insurerDetail['MD4'] ? insurerDetail['MD4']['insuredPremium'] : ''" readonly></div>
        </div>
        <div class="item">
            <div class="left">总金额</div>
            <div class="right"><input type="text"  :value="insurerDetail.total" readonly></div>
        </div>
    </div>
    <div class="button">
        <input type="button" value="去购买" id="to-pay">
    </div>
</div>
</body>
<script src="js/jquery-1.11.2.js"></script>
<script src="js/vue.min.js"></script>
<script src="js/common.js"></script>
<script>
    $("#to-pay").click(function(){
        window.location.href = "carOwerInfo.html";
    });
    $(function(){
        var  insurerDetailData = JSON.parse(localStorage.getItem("insurerDetail"));
        //投保保险费用
        var insurerDetail = {};
        //投保的保额
        var insurance = {};
        //商业保险起期
        insurerDetail.biBeginDate = insurerDetailData["biBeginDate"];
        insurerDetail.ciBeginDate = insurerDetailData["ciBeginDate"];
        insurerDetail.carshipTax = insurerDetailData["carshipTax"];
        insurance.biBeginDate = insurerDetailData["biBeginDate"];
        insurance.ciBeginDate = insurerDetailData["ciBeginDate"];
        insurance.carshipTax = insurerDetailData["carshipTax"];
        var total = parseFloat(insurerDetailData["carshipTax"]);
        var data = insurerDetailData.data;
        for(var i = 0;i < data.length;i ++){
            var coverageCode = data[i].coverageCode;
            insurerDetail[coverageCode] = {};
            insurerDetail[coverageCode].amount = data[i].amount;
            insurerDetail[coverageCode].insuredAmount = data[i].insuredAmount;
            insurerDetail[coverageCode].insuredPremium = parseFloat(data[i].insuredPremium);
            total += parseFloat(data[i]["insuredPremium"]);
        }
        insurerDetail.total = total.toFixed(2);
        var vm = new Vue({
            el:"#my-app",
            data:{
                insurerDetail:insurerDetail
            },
            methods:{}
        });
    });
</script>
